<template>
  <div>
    <div :class="$style.header">
      <span :class="$style.title">任务号：</span>
      <span :class="$style.value">{{ craftHeadData.taskNo }}</span>
    </div>

    <div :class="$style.wrap">
      <a-row :class="$style.craftHeadInfo">
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">联系人：</span>
          <span :class="$style.value">{{ craftHeadData.contacts }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">产品名称：</span>
          <span :class="$style.value">{{ craftHeadData.productName }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">款号：</span>
          <span :class="$style.value">{{ craftHeadData.skcNo }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">CP 号：</span>
          <span :class="$style.value">{{ craftHeadData.cpNo }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">一级分类：</span>
          <span :class="$style.value">{{ craftHeadData.firstSort }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">版本号：</span>
          <span :class="$style.value">{{ craftHeadData.cversion }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">创建时间：</span>
          <span :class="$style.value">{{ craftHeadData.createTime }}</span>
        </a-col>
      </a-row>
      <div :class="$style.status">
        状态：{{ quotedStatus[craftHeadData.status] }}
      </div>
    </div>
  </div>
</template>

<script>
import { quotedStatus, relationType } from '../../../types'

export default {
  data() {
    return {
      quotedStatus,
      relationType,
      craftHeadData: {}
    }
  },
  mounted() {
    this.getCraftHeadInfo({
      taskId: this.$route.query.taskId
    })
  },
  methods: {
    async getCraftHeadInfo({ taskId }) {
      const res = await this.$api.craft.craftTaskHeadInfo({ taskId })

      this.craftHeadData = res
    }
  }
}
</script>

<style lang="less" module>
@import './header.less';
</style>
